<template>
	<view class="u-rela">
		<image class="page-bg" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-lv-4.png"
			mode="widthFix"></image>
		<view class="page-wrap">
			<!-- 标题 -->
			<div class="u-flex title">
				<text class="u-font-38 blod u-m-l-15 u-flex-1">{{ dataList.title }}</text>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-location2.png"
					mode="widthFix" @click="tonav_map"></image>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-tel.png" mode="widthFix" @click="makePhoneCall">
				</image>
			</div>
			<!-- 地址 -->
			<div class="u-flex location u-m-t-30">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-location-3.png"
					mode="widthFix"></image>
				<text class="u-font-28 u-m-l-10 u-flex-1 u-line-1">地址：{{ dataList.address }}</text>
			</div>
			<div class="u-font-34 blod u-m-t-40 u-m-b-30">景点介绍</div>
			<view class="desc">
				{{ dataList.description }}
			</view>
			<image class="img-jd u-m-t-30"
				:src="dataList.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-lv-5.png' : dataList.thumbnail"
				mode="widthFix"></image>
			<div class="desc u-m-t-40" v-html="dataList.content">
				
			</div>
		</view>
		<!-- 留言 -->
		<view class="msg-wrap">
			<view class="u-flex">
				<image class="icon-comment"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-comment.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">留言</text>
			</view>
			<div class="list">
				<div class="item" v-for="item in commentList" :key="item.message_id">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png"
						mode="widthFix"></image>
					<div class="u-font-28 blod">{{ item.userinfo.nickname }}</div>
					<text class="u-font-24 u-tips-color">{{ item.time }}</text>
					<view class="u-font-28 u-m-t-30">{{ item.content }}</view>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dataList: {},
				commentList: []
			}
		},
		onLoad(options) {
			// console.log(options);

			// 热门旅游详情
			this.get_travel_hotDetails(options.id)
		},
		methods: {
			// 热门旅游详情
			get_travel_hotDetails(id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.travel_hotDetails,
					method: 'GET',
					data: {
						id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.dataList = res.data

						// 评论列表
						this.get_comment_index(this.dataList.id)
					}
				})
			},

			// 评论列表
			get_comment_index(target_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.comment_index,
					method: 'GET',
					data: {
						type: 2,
						target_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.commentList = res.data.list
					}
				})
			},
			
			//跳转到地图
			tonav_map(){
				uni.navigateTo({
					url:`/pages/map/map?latitude=${this.dataList.latitude}&longitude=${this.dataList.longitude}`
				})
			},
			
			// 拨打电话
			makePhoneCall(){
				let that = this
				uni.makePhoneCall({
				  phoneNumber: that.dataList.mobile, 
				  success: function() {
				    
				  },
				  fail: function() {
				    
				  }
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: relative;
		width: 750rpx;
		height: 400rpx;
		z-index: 1;
	}

	.title {
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 18rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-left: 20rpx;
		}
	}

	.location {
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}


	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
	}

	.desc {
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.img-jd {
		width: 690rpx;
		height: 400rpx;
		border-radius: 20rpx;
	}

	.msg-wrap {
		background: #fff;
		padding: 30rpx;
		margin-top: 20rpx;

		.icon-comment {
			width: 36rpx;
			height: 36rpx;
		}

		.list {

			.item {
				display: grid;
				grid-template-columns: 68rpx 1fr;
				gap: 0 20rpx;
				border-bottom: 1px solid #E6E6E6;
				margin-top: 40rpx;
				padding-bottom: 60rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					grid-row: 1/4;
				}

				&:last-of-type {
					border: 0;
				}

			}
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>